<template>
	<view class="page-body">
		<u-navbar :is-back="true" title="升级详情"></u-navbar>
		<view class="bg-white mt20 up_box">
			<u-cell-group :border="false" title="基础信息" :title-style="{fontSize:'36rpx',color:'#333',fontWeight:700}">
				<u-cell-item title="" 
				:value="junior.byUser.real_name" 
				:value-style="{fontSize:'32rpx',color:'#333',fontWeight:700}"
				:arrow="false">
					<view slot="icon">
						<u-image width="100rpx" height="100rpx" :src="junior.byUser.headimgurl?baseUrl+junior.byUser.headimgurl:'/static/public/images/headimgurl.jpg'" shape="circle">
						</u-image>
					</view>
				</u-cell-item>
				
				<u-cell-item title="手机号" 
				:value="junior.byUser.mobile" 
				:value-style="{fontSize:'28rpx',color:'#333',fontWeight:700}"
				:arrow="false"></u-cell-item>
				
				<u-cell-item title="当前等级" 
				:value="junior.proxyLevel.proxy_name" 
				:value-style="{fontSize:'28rpx',color:'#333',fontWeight:700}"
				:arrow="false"></u-cell-item>
				
				<u-cell-item title="晋升等级" 
				:value="proxy_name" 
				:value-style="{fontSize:'28rpx',color:'#333',fontWeight:700}"
				:arrow="false"></u-cell-item>
				
				<u-cell-item title="申请时间" 
				:value="order.add_time" 
				:value-style="{fontSize:'28rpx',color:'#333',fontWeight:700}"
				:arrow="false"></u-cell-item>
				
			</u-cell-group>
			
			<u-cell-group :border="false" title="晋升信息" :title-style="{fontSize:'36rpx',color:'#333',fontWeight:700}">
				<u-cell-item title="晋升方式" 
				:value="order.upgrade_type == 2 ? '保证金金额' : '业绩方式'" 
				:value-style="{fontSize:'28rpx',color:'#C39F4F',fontWeight:700}"
				:arrow="false"></u-cell-item>
				
				<u-cell-item v-if="order.upgrade_type == 2" title="保证金金额" 
				:value="order.order_amount" 
				:value-style="{fontSize:'28rpx',color:'#C39F4F',fontWeight:700}"
				:arrow="false"></u-cell-item>
				<u-cell-item v-if="order.upgrade_type == 2" title="保证金凭证" :border-bottom="false" :arrow="false"></u-cell-item>
			</u-cell-group>
			
			<view v-if="order.upgrade_type == 2" class="p30">
				<u-grid :col="3" :border="false">
					<u-grid-item v-for="(item, index) in deposit_img">
						<view class="grid-img">
							<image @click="app.showImg(baseUrl+item, 0, baseUrl)" :src="baseUrl + item" mode="aspectFit"></image>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
			<!-- <u-cell-group :border="false">
				<u-cell-item title="电子合同" value="查看合同" @click="app.goPage('/pagesB/channel/contract/index?proxy_id='+proxy_id)"></u-cell-item>
			</u-cell-group> -->
		</view>

		<view v-if="order.status == 0" class="u-flex p40 bg-white btn-box">
			<u-button size="default" hover-class="none" shape="circle" type="default" class="u-flex-1 u-m-r-10 reject" @click="isFail = true">驳回审核</u-button>
			<u-button size="default" hover-class="none" shape="circle" type="default" class="u-flex-1 u-m-l-10 pass" @click="pass">通过审核</u-button>
		</view>
		<u-modal v-model="isFail"
		 title="审核未通过原因" 
		 confirm-text="我写好了"
		 :mask-close-able="true"
		 :confirm-style="{height:'80rpx',lineHeight:'80rpx',margin:'20rpx 140rpx',background:'#C39F4F',borderRadius:'40rpx',color:'#fff'}"
		 @confirm="reject">
			<view class="slot-content mt20 p20">
				<u-field class="reject-input" 
					label-width="0" 
					:clearable="false" 
					v-model="remark" 
					placeholder="请输入审核未通过原因，或者需要修改的地方" 
					type="textarea" 
					maxlength="50" 
					@input="remarkCount"
				>
				</u-field>
				<view class="count">{{remark_len}}/50</view>		
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			let that = this;
			return {
				baseUrl: this.config.baseUrl,
				deposit_img: [],
				order_id:0,
				proxy_id:0,
				proxy_name:'',
				upgrade_type: '',
				apply_time: '',
				isFail: false,
				remark: '',
				junior:{
					byUser:{},
					proxyLevel:{}
				},
				order: {},
				remark_len: 0
				
			}
		},
		onLoad(options) {
			this.proxy_id = options.proxy_id;
			this.order_id = options.order_id;
			//this.getProxyLevel();
			this.getInfo();
		},
		onShow: function() {
			
		},
		computed: {},
		onReady() {},
		methods: {
			remarkCount(){
				this.remark_len = this.remark.length
			},
			getProxyLevel(){//获取可升级的层级
				this.$u.post('channel/api.proxy_users/getProxyLevel', {proxy_id:this.proxy_id}).then(res => {
					this.proxy_name = res.data.proxy_name;
				});
			},
			getInfo(){
				this.$u.post('channel/api.wallet/getJuniorRechargeLogInfo',{order_id:this.order_id}).then(res => {
					if(res.data.status == 1){
						this.isFail = true;
					}else{
						this.isFail = false;
					}
					this.order = res.data.order;
					this.deposit_img = res.data.order.imgs.split(',');
					this.junior = res.data.junior;
					this.proxy_id = this.order.proxy_id;
					this.getProxyLevel();
				})
			},
			pass(){
				this.remark = '';
				this.disposeOrder(9);
			},
			reject(){
				if(this.remark == ''){
					this.isFail = true;
					this.$u.toast('请输入审核未通过原因');
					return false;
				}
				this.disposeOrder(1);
			},
			// 订单操作
			disposeOrder(_status){
				this.$u.post('channel/api.Wallet/checkPay', {
					order_id:this.order_id,
					status:_status,
					check_remark: this.remark
					}).then(res => {
						//navItem.orderList[_index].status = _status;
						if(_status == 9){
							this.$u.toast('已通过');
							//navItem.orderList[_index].ostatus = '已完成';
						} else {
							this.$u.toast('已拒绝');
							//navItem.orderList[_index].ostatus = '审核拒绝';
						}
						this.order.status = _status;
				})
			},
		}
	}
</script>

<style lang="scss">
	.superior_box{
		position: relative;
		display: block;
		overflow: hidden;
		height: 200rpx;
		.headimgurl {
			width: 100rpx !important;
			height: 100rpx !important;
			border: 5rpx solid #FFFFFF;
		}
		.level{
			margin-left: 10rpx;
			font-size: 24rpx;
			color: $base-color;
			border-radius: 10rpx;
			padding: 4rpx 10rpx;
			border: 1rpx solid $base-color;
		}
		.persql{
			font-size: 23rpx;
			background: #5392f3;
			color: #FFFFFF;
		    position: absolute;
		    z-index: 9;
			padding: 0rpx 50rpx;
		    top: 28rpx;
		    right: -63rpx;
		    -webkit-transform: rotate(50deg);
		    transform: rotate(50deg);
		}
	}
	.up_box{
		border-bottom: 1px solid #f1f1f1;
		line-height: 60rpx;
		.title{
			font-size: 28rpx;
		}
		.levle_box{
			text-align: center;
			.img {
				margin: 0rpx auto;
				margin-bottom: 30rpx;
			}
			.select_level{
				font-size: 36rpx;
				font-weight: 600;
			}
			.tip{
				font-size: 23rpx;
				color: $font-color-light;
			}
		}
		.condition_box{
			.tit{
				text-align: left;
				font-size: 32rpx;
			}
			.tip{
				font-size: 26rpx;
				color: $font-color-light;
			}
		}
	}
	.grid-img{
		width: 100%;
		height: 100%;
	}
	.btn-box{
		font-size: 32rpx;
		.reject{
			border: 2rpx solid #C39F4F;
			color: #C39F4F;
		}
		.pass{
			background: #C39F4F;
			color: #fff;
		}
	}
	.reject-input{
		height: 240rpx;
		background: #F0F0F5;
		border-radius: 12rpx;
	}
	.slot-content{
		position: relative;
		
		.count{
			position: absolute;
			bottom:30rpx;
			right:40rpx;
			color: #86869C;
			font-size: 24rpx;
		}
	}
</style>